<template>
  <Container>
    <main class="content">
      <div class="header">
        <h2>加入的提问箱</h2>
      </div>
      <Card :items="displayedItems">
        <template #copylink="{ item }">
          <Copylink :url="item.url" />
        </template>
      </Card>
      <el-pagination
        @current-change="handlePageChange"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="prev, pager, next"
        :total="totalItems"
        class="pagination"
      />
    </main>
    <Footmenu />
  </Container>
</template>
    
<script>
import Container from '../components/main/container.vue';
import Footmenu from '../components/main/footmenu.vue';
import Copylink from '../components/main/copylink.vue';
import Card from '../components/main/card.vue';
import { ref, computed, onMounted } from 'vue';
import { get } from "@/net";
export default {
  name: 'App',
  components: {
    Container, Footmenu, Copylink, Card
  },
  setup () {
    const currentPage = ref(1);          // 褰撳墠椤�
    const pageSize = ref(10);            // 姣忛〉鏄剧ず鐨勬暟鎹潯鏁�
    const totalItems = ref(50);          // 鎬绘暟鎹噺
    const aid = ref(1);
    const allItems = ref([]); // 鐢ㄤ簬瀛樺偍浠庢湇鍔″櫒鑾峰彇鐨勫叏閮ㄦ暟鎹�
    const rowStyle = { height: '66px' };
    // 鑾峰彇鏁版嵁鐨勫紓姝ユ柟娉�
    const fetchData = async () => {
      get(
        "/question_box/get_my_join_question_box", { mid: aid.value, page: currentPage.value, page_size: pageSize.value },
        (message) => {
          console.log(message.data);
          allItems.value = message.data.boxes; // 鍋囪杩斿洖鐨勬暟鎹粨鏋勪腑鏈� items 瀛楁
          totalItems.value = message.data.total; // 鍋囪杩斿洖鏁版嵁鍖呭惈 total 瀛楁
        },
        (message) => {
          console.log(message.msg);
        }
      );
    };

    onMounted(() => {
      fetchData(); // 缁勪欢鍔犺浇鏃惰姹傛暟鎹�
    });

    // 璁＄畻褰撳墠椤电殑鏁版嵁
    const displayedItems = computed(() => {
      const start = 0;
      const end = start + pageSize.value;
      return allItems.value.slice(start, end);
    });
    // 椤电爜鍙樺寲鏃剁殑澶勭悊鍑芥暟
    const handlePageChange = (page) => {
      currentPage.value = page;
      console.log('褰撳墠椤�:', page);
      fetchData();
    };

    return {
      currentPage, totalItems, pageSize,
      displayedItems, handlePageChange,
      rowStyle
    };

  },
};
</script>
    
<style scoped>
.content {
  height: 90%;
  padding: 1%;
  background-color: #ffffff; /* 确保表格区域背景为白色 */
}

.header {
  height: 10%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pagination {
  height: 10%;
  display: flex;
  justify-content: center;
}
</style>